<template>
  <div class="vue-quill-editor clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://github.com/surmon-china/vue-quill-editor">https://github.com/surmon-china/vue-quill-editor</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vue-quill-editor --save<br>
            <br>
            import 'quill/dist/quill.core.css'<br>
            import 'quill/dist/quill.snow.css'<br>
            import 'quill/dist/quill.bubble.css'<br>
            <br>
            import { quillEditor } from 'vue-quill-editor'<br>
            <br>
            export default {<br>
              &nbsp;&nbsp;components: {<br>
                &nbsp;&nbsp;&nbsp;&nbsp;quillEditor<br>
              &nbsp;&nbsp;}<br>
            }<br>
            <br>
            &lt;quill-editor v-model="content" :options="editorOption"&gt;&lt;/quill-editor&gt;
          </code>
        </div>
      </el-card>
      <quill-editor v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)">
      </quill-editor>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'VueQuillEditor',
  components: {
    quillEditor
  },
  data () {
    return {
      content: '<p>example content</p>',
      editorOption: { /* quill options */ }
    }
  },
  mounted () {
    console.log('this is current quill instance object', this.editor)
  },
  methods: {
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-quill-editor{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
  }
}
</style>
